<template>
    <div class="companyNotice">
        <editNotice v-if="show_Edit" :noticeInfo="noticeInfo" :type="type" @back="back"></editNotice>
        <div :style="{ height: show_Edit ? 0 : 'auto', overflow: 'hidden' }">
            <div class="title">
                <div class="create-btn" @click="createNotice">
                    新增
                </div>
            </div>
            <el-table :data="noticeList" border tooltip-effect="dark" style="width: 100%; height: calc(100vh - 240px)">
                <el-table-column prop="noticeId" align="center" width="80" label="序号">
                </el-table-column>
                <el-table-column prop="noticeTitle" align="center" width="120" label="公告标题">
                </el-table-column>
                <el-table-column prop="noticeContent" align="center" label="公告内容">
                </el-table-column>
                <el-table-column label="发布终端" align="center" width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.noticeType == 1 ? "用户端" : scope.row.noticeType == 2 ? "小程序端" : "全部" }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" width="140">
                    <template slot-scope="scope">
                        <div>{{ scope.row.createTime | formatDateMin }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="开始时间" align="center" width="140">
                    <template slot-scope="scope">
                        <div>{{ scope.row.startTime | formatDateMin }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="截止时间" align="center" width="140">
                    <template slot-scope="scope">
                        <div>{{ scope.row.endTime | formatDateMin }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <div>
                            <el-button class="checkCard" @click="editNotice(scope.row)" type="text" size="medium"
                                style="color: #51cdcb;">编辑</el-button>
                            <el-button class="checkCard" @click="deleteNotice(scope.row)" type="text" size="medium"
                                style="color: #FF5C6C;">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                    :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { selectNoticeListApi, delNoticeApi } from "@/api/api.js";
import { str2time } from "@/utils/util.js";
export default {
    components: {
        editNotice: () => import("@/components/edit-notice.vue")
    },
    data() {
        return {
            type: '',
            noticeInfo: {},
            show_Edit: false,
            noticeList: [],
            pageNum: 1,
            total: 0
        }
    },
    mounted() {
        this.getNoticeList();
    },
    methods: {
        getNoticeList() {
            let params = {
                pageNum: this.pageNum
            };
            selectNoticeListApi(params).then(res => {
                if (res.code == 200) {
                    this.noticeList = res.data.pageInfo.list;
                    this.total = res.data.pageInfo.total;
                } else {
                    this.noticeList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.noticeList = [];
            })
        },
        back(type) {
            this.show_Edit = false;
            if (type == "update") {
                this.getNoticeList();
            }
        },
        createNotice() {
            this.type = "create";
            let noticeInfo = {
                noticeTitle: '',
                noticeContent: '',
                noticeJumpType: 1,
                noticeJumpUrl: '',
                noticeType: 0,
                endTimes: str2time(new Date()),
                startTimes: str2time(new Date()),
            };
            this.noticeInfo = noticeInfo;
            this.show_Edit = true;
        },
        editNotice(item) {
            this.type = "edit";
            let noticeInfo = {
                noticeId: item.noticeId,
                noticeTitle: item.noticeTitle,
                noticeContent: item.noticeContent,
                noticeJumpType: item.noticeJumpType,
                noticeJumpUrl: item.noticeJumpUrl,
                noticeType: item.noticeType,
                endTimes: str2time(item.endTime),
                startTimes: str2time(item.startTime),
            };
            this.noticeInfo = noticeInfo;
            this.show_Edit = true;
        },
        deleteNotice(item) {
            this.$confirm('确认删除公告?', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning'
            }).then(res => {
                let params = {
                    noticeId: item.noticeId
                };
                delNoticeApi(params).then(res => {
                    if (res.code === 200) {
                        this.getNoticeList();
                    }
                });
            }).catch(action => {
            });
        },
        handleCurrentChange() {
            this.getNoticeList();
        }
    },
}
</script>
<style lang="scss" scoped>
.companyNotice {
    .title {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
        .create-btn {
            border-radius: 4px;
            background: #51CDCB;
            font-size: 14px;
            line-height: 40px;
            height: 40px;
            color: #fff;
            padding: 0 20px;
            cursor: pointer;
        }
    }
    .page {
        background: #fff;
        padding: 10px 0;
        text-align: center;
    }
}
</style>
